﻿<template>
  <h2>应付费用管理</h2>
  <div class="fee-management">
    <!-- 搜索筛选区域 -->
    <div class="search-section">
      <div class="search-form">
        <div class="form-row">
          <div class="form-item">
            <label>外协单位</label>
            <input 
              type="text" 
              v-model="searchForm.consignorUnit" 
              placeholder="请输入外协单位"
              class="form-input"
            />
          </div>
          <div class="form-item">
            <label>经办人</label>
            <input 
              type="text" 
              v-model="searchForm.handler" 
              placeholder="请输入经办人"
              class="form-input"
            />
          </div>
          <div class="form-item">
            <label>结算方式</label>
            <select v-model="searchForm.paymentMethod" class="form-select">
              <option value="">全部</option>
              <option value="银行转账">银行转账</option>
              <option value="微信支付">微信支付</option>
              <option value="支付宝支付">支付宝支付</option>
              <option value="银联支付">银联支付</option>
              <option value="企业转账">企业转账</option>
              <option value="线下支付">线下支付</option>
              <option value="私人转账">私人转账</option>
            </select>
          </div>
          <div class="form-item">
            <label>审批状态</label>
            <select v-model="searchForm.approvalStatus" class="form-select">
              <option value="">全部</option>
              <option value="0">待审批</option>
              <option value="1">已审批</option>
              <option value="2">已拒绝</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <div class="form-item">
            <label>业务日期</label>
            <div class="date-input-wrapper">
              <input 
                type="date" 
                v-model="searchForm.businessDate" 
                placeholder="请选择业务日期"
                class="form-input date-input"
              />
              <i class="icon-calendar"></i>
            </div>
          </div>
          <div class="form-actions">
            <button @click="handleSearch" class="btn btn-primary" :disabled="loading">
              <i class="icon-search"></i>
              {{ loading ? '查询中...' : '查询' }}
            </button>
            <button @click="handleReset" class="btn btn-secondary">
              <i class="icon-refresh"></i>
              重置
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <button @click="handleAdd" class="btn btn-primary">
        新增
      </button>
      <button @click="handleBatchDelete" class="btn btn-danger" :disabled="selectedItems.length === 0">
        批量删除 ({{ selectedItems.length }})
      </button>
      <button @click="handleBatchVerify" class="btn btn-success" :disabled="selectedItems.length === 0">
        批量核对 ({{ selectedItems.length }})
      </button>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-section">
      <div v-if="loading" class="loading-overlay">
        <div class="loading-spinner">加载中...</div>
      </div>
      <table class="data-table">
        <thead>
          <tr>
            <th>
              <input 
                type="checkbox" 
                v-model="selectAll" 
                @change="handleSelectAll"
                class="checkbox"
              />
            </th>
            <th>业务单号</th>
            <th>外协单位</th>
            <th>结算方式</th>
            <th>吨位(立方米)</th>
            <th>单价(元/立方米)</th>
            <th>金额(元)</th>
            <th>业务日期</th>
            <th>经办人</th>
            <th>创建时间</th>
            <th>备注</th>
            <th>审批状态</th>
            <th>审批人</th>
            <th>审批时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="tableData.length === 0 && !loading">
            <td colspan="15" class="no-data">暂无数据</td>
          </tr>
          <tr v-for="(item, index) in tableData" :key="item.id || index">
            <td>
              <input 
                type="checkbox" 
                v-model="item.selected" 
                class="checkbox"
              />
            </td>
            <td>{{ item.businessOrderNo || '-' }}</td>
            <td>{{ item.consignorUnit || '-' }}</td>
            <td>{{ item.paymentMethod || '-' }}</td>
            <td>{{ item.tonnage || 0 }}</td>
            <td>{{ item.unitPrice || 0 }}</td>
            <td>{{ item.amount || 0 }}</td>
            <td>{{ formatDate(item.businessDate) }}</td>
            <td>{{ item.handler || '-' }}</td>
            <td>{{ formatDateTime(item.createdTime) }}</td>
            <td>{{ item.notes || '-' }}</td>
            <td>
              <span :class="['status', getApprovalStatusClass(item.approvalstatus)]">
                {{ getApprovalStatusText(item.approvalstatus) }}
              </span>
            </td>
            <td>{{ item.approvalByName || '-' }}</td>
            <td>{{ formatDateTime(item.approvalTime) }}</td>
            <td class="actions">
              <button @click="handleEdit(item)" class="action-btn edit">编辑</button>
              <button 
                @click="handleDeleteItem(item)" 
                class="action-btn delete"
                :disabled="loading"
                title="删除"
              >
                删除
              </button>
              <button @click="handleView(item)" class="action-btn view">查看</button>
              <button 
                @click="handleVerify(item)" 
                class="action-btn verify"
                :class="{ disabled: item.verificationStatus === 1 }"
                :disabled="item.verificationStatus === 1"
                :title="item.verificationStatus === 1 ? '已核对' : '核对'"
              >核对</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-section">
      <div class="pagination-info">
        共{{ pagination.totalPage }}页/{{ pagination.totalCount }}条数据
      </div>
      <div class="pagination-controls">
        <button 
          @click="goToPage(pagination.currentPage - 1)" 
          :disabled="pagination.currentPage === 1 || loading"
          class="pagination-btn"
        >
          &lt;
        </button>
        <button 
          v-for="page in visiblePages" 
          :key="page"
          @click="goToPage(typeof page === 'number' ? page : pagination.currentPage)"
          :class="['pagination-btn', { active: page === pagination.currentPage }]"
          :disabled="loading"
        >
          {{ page }}
        </button>
        <button 
          @click="goToPage(pagination.currentPage + 1)" 
          :disabled="pagination.currentPage === pagination.totalPage || loading"
          class="pagination-btn"
        >
          &gt;
        </button>
        <div class="jump-to">
          跳至
          <input 
            type="number" 
            v-model="jumpToPage" 
            @keyup.enter="jumpToPageHandler"
            class="jump-input"
            :disabled="loading"
          />
          页
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from "vue"
import { useRouter } from "vue-router"
import { feeApi } from '@/api'

// 接口类型定义 - 根据API响应调整
interface FeeItem {
  id: number
  businessOrderNo: string
  consignorUnit: string
  paymentMethod: string
  tonnage: number
  unitPrice: number
  amount: number
  businessDate: string
  handler: string
  notes: string
  approvalstatus: number
  approvalByName: string | null
  approvalTime: string | null
  createdTime: string
  payFee: boolean
  verificationStatus?: number  // 核对状态 0-未核对 1-已核对
  verifier?: string           // 核对人
  verificationTime?: string   // 核对时间
  selected?: boolean
}

interface ApiResponse {
  code: number
  message: string
  data: {
    totalCount: number
    totalPage: number
    data: FeeItem[]
  }
}

interface DeleteResponse {
  code: number
  message: string
  data: number
}

interface BatchDeleteResponse {
  code: number
  message: string
  data: number
}

// 路由
const router = useRouter()

// 消息提示方法
const showSuccess = (message: string) => {
  const toast = document.createElement('div')
  toast.className = 'toast toast-success'
  toast.textContent = message
  document.body.appendChild(toast)
  
  setTimeout(() => toast.classList.add('show'), 100)
  
  setTimeout(() => {
    toast.classList.remove('show')
    setTimeout(() => document.body.removeChild(toast), 300)
  }, 3000)
}

const showError = (message: string) => {
  const toast = document.createElement('div')
  toast.className = 'toast toast-error'
  toast.textContent = message
  document.body.appendChild(toast)
  
  setTimeout(() => toast.classList.add('show'), 100)
  
  setTimeout(() => {
    toast.classList.remove('show')
    setTimeout(() => document.body.removeChild(toast), 300)
  }, 5000)
}

const showWarning = (message: string) => {
  const toast = document.createElement('div')
  toast.className = 'toast toast-warning'
  toast.textContent = message
  document.body.appendChild(toast)
  
  setTimeout(() => toast.classList.add('show'), 100)
  
  setTimeout(() => {
    toast.classList.remove('show')
    setTimeout(() => document.body.removeChild(toast), 300)
  }, 4000)
}

// 搜索表单数据
const searchForm = reactive({
  consignorUnit: "",
  paymentMethod: "",
  approvalStatus: "",
  handler: "",
  businessDate: ""
})

// 表格数据
const tableData = ref<FeeItem[]>([])

// 加载状态
const loading = ref(false)

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  totalCount: 0,
  totalPage: 0
})

const jumpToPage = ref(1)

// 计算属性
const selectAll = computed({
  get: () => tableData.value.length > 0 && tableData.value.every(item => item.selected),
  set: (value) => {
    tableData.value.forEach(item => {
      item.selected = value
    })
  }
})

const selectedItems = computed(() => {
  return tableData.value.filter(item => item.selected)
})

const visiblePages = computed(() => {
  const pages = []
  const start = Math.max(1, pagination.currentPage - 2)
  const end = Math.min(pagination.totalPage, start + 4)
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  
  if (end < pagination.totalPage) {
    pages.push("...")
    pages.push(pagination.totalPage)
  }
  
  return pages
})

// API请求函数
const fetchData = async () => {
  loading.value = true
  try {
    // 构建查询参数
    const params: any = {
      PageIndex: pagination.currentPage,
      PageSize: pagination.pageSize
    }

    // 添加搜索条件
    if (searchForm.consignorUnit && searchForm.consignorUnit.trim()) {
      params.ConsignorUnit = searchForm.consignorUnit.trim()
    }
    if (searchForm.paymentMethod && searchForm.paymentMethod.trim()) {
      params.PaymentMethod = searchForm.paymentMethod.trim()
    }
    if (searchForm.approvalStatus && searchForm.approvalStatus.trim()) {
      params.ApprovalStatus = searchForm.approvalStatus.trim()
    }
    if (searchForm.handler && searchForm.handler.trim()) {
      params.Handler = searchForm.handler.trim()
    }
    if (searchForm.businessDate && searchForm.businessDate.trim()) {
      params.BusinessDate = searchForm.businessDate.trim()
    }

    const response = await feeApi.getPayableFees(params)
    
    if (response.data.code === 200) {
      const result = response.data
      // 为每个数据项添加selected属性和默认核对状态
      tableData.value = result.data.data.map((item: FeeItem) => ({
        ...item,
        selected: false,
        verificationStatus: item.verificationStatus ?? 0,  // 默认为未核对
        verifier: item.verifier ?? '',
        verificationTime: item.verificationTime ?? ''
      }))
      
      pagination.totalCount = result.data.totalCount
      pagination.totalPage = result.data.totalPage
      
      console.log(`成功获取 ${result.data.data.length} 条数据，共 ${result.data.totalCount} 条，${result.data.totalPage} 页`)
    } else {
      console.error('API返回错误:', response.data.message)
      tableData.value = []
      showError(`查询失败: ${response.data.message}`)
    }
  } catch (error: any) {
    console.error('请求失败:', error)
    const errorMessage = error instanceof Error ? error.message : '未知错误'
    showError(`获取数据失败: ${errorMessage}\n请检查:\n1. 后端服务是否启动\n2. API地址是否正确\n3. 网络连接是否正常`)
    tableData.value = []
  } finally {
    loading.value = false
  }
}

// 删除单个记录的函数
const deleteItem = async (id: number) => {
  try {
    console.log(`开始删除记录，ID: ${id}`)
    
    const response = await feeApi.deleteReceivableFee(id)
    console.log('删除API响应:', response)
    
    if (response.code === 200) {
      console.log('删除成功:', response.message)
      return { success: true, message: response.message }
    } else {
      console.error('删除失败:', response.message)
      return { success: false, message: response.message }
    }
  } catch (error: any) {
    console.error('删除请求失败:', error)
    const errorMessage = error instanceof Error ? error.message : '未知错误'
    return { 
      success: false, 
      message: `删除失败: ${errorMessage}\n请检查:\n1. 后端服务是否启动\n2. API地址是否正确\n3. 网络连接是否正常`
    }
  }
}

// 批量删除记录的函数
const batchDeleteItems = async (ids: number[]) => {
  try {
    console.log(`开始批量删除记录，IDs: ${ids.join(', ')}`)
    
    const response = await feeApi.deleteReceivableFeeList(ids)
    console.log('批量删除API响应:', response)
    
    if (response.code === 200) {
      console.log('批量删除成功:', response.message)
      return { success: true, message: response.message, deletedCount: response.data }
    } else {
      console.error('批量删除失败:', response.message)
      return { success: false, message: response.message }
    }
  } catch (error: any) {
    console.error('批量删除请求失败:', error)
    const errorMessage = error instanceof Error ? error.message : '未知错误'
    return { 
      success: false, 
      message: `批量删除失败: ${errorMessage}\n请检查:\n1. 后端服务是否启动\n2. API地址是否正确\n3. 网络连接是否正常`
    }
  }
}

// 工具函数
const formatDate = (dateString: string) => {
  if (!dateString) return '-'
  try {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN')
  } catch (error) {
    return dateString
  }
}

const formatDateTime = (dateString: string | null) => {
  if (!dateString) return '-'
  try {
    const date = new Date(dateString)
    return date.toLocaleString('zh-CN')
  } catch (error) {
    return dateString
  }
}

const getApprovalStatusText = (status: number) => {
  const statusMap: { [key: number]: string } = {
    0: '待审批',
    1: '已审批',
    2: '已拒绝'
  }
  return statusMap[status] || '未知'
}

const getApprovalStatusClass = (status: number) => {
  const classMap: { [key: number]: string } = {
    0: 'pending',
    1: 'approved',
    2: 'rejected'
  }
  return classMap[status] || 'unknown'
}

// 核对状态相关函数
const getVerificationStatusText = (status: number) => {
  const statusMap: { [key: number]: string } = {
    0: '未核对',
    1: '已核对'
  }
  return statusMap[status] || '未知'
}

const getVerificationStatusClass = (status: number) => {
  const classMap: { [key: number]: string } = {
    0: 'not-verified',
    1: 'verified'
  }
  return classMap[status] || 'unknown'
}

// 事件处理函数
const handleSearch = () => {
  console.log('执行搜索，搜索条件:', searchForm)
  pagination.currentPage = 1
  fetchData()
}

const handleReset = () => {
  console.log('重置搜索条件')
  Object.keys(searchForm).forEach(key => {
    (searchForm as any)[key] = ""
  })
  pagination.currentPage = 1
  fetchData()
}

const handleAdd = () => {
  console.log("新增")
  router.push({ name: "AddFee" })
}

const handleDelete = () => {
  if (selectedItems.value.length === 0) {
    showWarning('请选择要删除的数据')
    return
  }
  console.log("删除选中项", selectedItems.value)
  // 这里实现删除逻辑
}

const handleSelectAll = () => {
  // 全选逻辑已在computed中实现
}

const handleEdit = (item: FeeItem) => {
  console.log("编辑:", item)
  
  // 确保ID存在且有效
  if (!item.id) {
    showError('记录ID无效，无法编辑')
    return
  }
  
  console.log('跳转参数:', { id: item.id, mode: 'edit' })
  
  // 编辑模式跳转
  router.push({
    path: `/UpdateFee/${item.id}`,
    query: { mode: 'edit' }
  })
}

// 删除单个记录的处理函数
const handleDeleteItem = async (item: FeeItem) => {
  if (!item.id) {
    showWarning('无法获取记录ID，删除失败')
    return
  }

  if (confirm(`确认要删除业务单号为 "${item.businessOrderNo}" 的记录吗？\n此操作不可撤销！`)) {
    loading.value = true
    
    try {
      const result = await deleteItem(item.id)
      
      if (result.success) {
        showSuccess(`删除成功: ${result.message}`)
        // 删除成功后重新加载数据
        await fetchData()
      } else {
        showError(result.message)
      }
    } catch (error: any) {
      console.error('删除操作异常:', error)
      showError('删除操作出现异常，请重试')
    } finally {
      loading.value = false
    }
  }
}

const handleView = (item: FeeItem) => {
  console.log("查看:", item)
  
  // 确保ID存在且有效
  if (!item.id) {
    showError('记录ID无效，无法查看')
    return
  }
  
  console.log('跳转参数:', { id: item.id, mode: 'view' })
  
  // 使用path方式跳转，确保参数正确传递
  router.push({
    path: `/UpdateFee/${item.id}`,
    query: { mode: 'view' }
  })
}

// 核对相关函数
const handleVerify = (item: FeeItem) => {
  if (item.verificationStatus === 1) {
    return // 已核对，不允许重复核对
  }
  
  if (confirm('确认要核对此条记录吗？')) {
    // 这里实现核对逻辑
    item.verificationStatus = 1
    item.verifier = '当前用户' // 这里应该从用户信息中获取
    item.verificationTime = new Date().toISOString()
    console.log("核对记录:", item)
  }
}

const handleBatchVerify = () => {
  if (selectedItems.value.length === 0) {
    showWarning('请选择要核对的数据')
    return
  }
  
  const unverifiedItems = selectedItems.value.filter(item => item.verificationStatus === 0)
  if (unverifiedItems.length === 0) {
    showWarning('所选数据已全部核对')
    return
  }
  
  if (confirm(`确认要批量核对 ${unverifiedItems.length} 条记录吗？`)) {
    // 这里实现批量核对逻辑
    unverifiedItems.forEach(item => {
      item.verificationStatus = 1
      item.verifier = '当前用户' // 这里应该从用户信息中获取
      item.verificationTime = new Date().toISOString()
    })
    console.log("批量核对记录:", unverifiedItems)
  }
}

// 批量删除记录的处理函数
const handleBatchDelete = async () => {
  if (selectedItems.value.length === 0) {
    showWarning('请选择要删除的数据')
    return
  }

  const selectedIds = selectedItems.value.map(item => item.id).filter(id => id)
  if (selectedIds.length === 0) {
    showWarning('所选数据中没有有效的ID，无法删除')
    return
  }

  const businessOrderNos = selectedItems.value.map(item => item.businessOrderNo).join('、')
  if (confirm(`确认要删除以下 ${selectedIds.length} 条记录吗？\n\n业务单号：${businessOrderNos}\n\n此操作不可撤销！`)) {
    loading.value = true
    
    try {
      const result = await batchDeleteItems(selectedIds)
      
      if (result.success) {
        showSuccess(`批量删除成功: ${result.message}\n共删除 ${result.deletedCount} 条记录`)
        // 删除成功后重新加载数据
        await fetchData()
      } else {
        showError(result.message)
      }
    } catch (error: any) {
      console.error('批量删除操作异常:', error)
      showError('批量删除操作出现异常，请重试')
    } finally {
      loading.value = false
    }
  }
}

const goToPage = (page: number) => {
  if (page >= 1 && page <= pagination.totalPage && !loading.value) {
    console.log(`跳转到第 ${page} 页`)
    pagination.currentPage = page
    fetchData()
  }
}

const jumpToPageHandler = () => {
  const targetPage = jumpToPage.value
  if (targetPage >= 1 && targetPage <= pagination.totalPage) {
    goToPage(targetPage)
  } else {
    showWarning(`页码必须在 1 到 ${pagination.totalPage} 之间`)
  }
}

// 监听分页变化
watch(() => pagination.currentPage, (newPage) => {
  console.log(`当前页变更为: ${newPage}`)
})

// 生命周期
onMounted(() => {
  // 检查路由参数和查询参数
  const id = router.currentRoute.value.params.id
  const mode = router.currentRoute.value.query.mode as string
  
  console.log('接收到的路由参数:', { id, mode })
  
  console.log('组件挂载，开始加载数据')
  fetchData()
})
</script>

<style scoped>
.fee-management {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 搜索区域样式 */
.search-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-row {
  display: flex;
  gap: 20px;
  align-items: center;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 200px;
}

.form-item label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.form-input, .form-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.form-input:focus, .form-select:focus {
  border-color: #1890ff;
}

.date-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.date-input {
  padding-right: 30px;
}

.icon-calendar {
  position: absolute;
  right: 10px;
  color: #999;
  font-size: 16px;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.3s;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #40a9ff;
}

.btn-secondary {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #e6f7ff;
  border-color: #1890ff;
  color: #1890ff;
}

.btn-success {
  background-color: #52c41a;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background-color: #73d13d;
}

.btn-danger {
  background-color: #ff4d4f;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background-color: #ff7875;
}

.btn-danger:disabled {
  background-color: #ffccc7;
  color: #fff;
}

/* 操作按钮区域 */
.action-section {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  gap: 10px;
}

/* 表格样式 */
.table-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  position: relative;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-spinner {
  font-size: 16px;
  color: #1890ff;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  background-color: #fafafa;
  padding: 12px 8px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  white-space: nowrap;
}

.data-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background-color: #f5f5f5;
}

.no-data {
  text-align: center;
  color: #999;
  font-style: italic;
  padding: 40px;
}

.checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  min-width: 60px;
  text-align: center;
}

.status.pending {
  background-color: #fff2e8;
  color: #fa8c16;
  border: 1px solid #ffd591;
}

.status.approved {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status.rejected {
  background-color: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.status.unknown {
  background-color: #f5f5f5;
  color: #999;
  border: 1px solid #d9d9d9;
}

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  transition: all 0.3s;
  color: #1890ff;
  text-decoration: underline;
}

.action-btn:hover:not(.disabled) {
  background-color: #f0f0f0;
  text-decoration: none;
}

.action-btn.disabled {
  color: #d9d9d9;
  cursor: not-allowed;
  text-decoration: none;
}

.action-btn.verify {
  color: #52c41a;
}

.action-btn.verify.disabled {
  color: #d9d9d9;
}

.action-btn.delete {
  color: #ff4d4f;
}

.action-btn.view {
  color: #1890ff;
}

.action-btn.edit {
  color: #fa8c16;
}

/* 分页样式 */
.pagination-section {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pagination-btn {
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  border-color: #1890ff;
  color: #1890ff;
}

.pagination-btn.active {
  background-color: #1890ff;
  border-color: #1890ff;
  color: white;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.jump-to {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 15px;
  font-size: 14px;
  color: #666;
}

.jump-input {
  width: 50px;
  padding: 4px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  text-align: center;
  outline: none;
}

.jump-input:focus {
  border-color: #1890ff;
}

/* 图标样式 */
.icon-search::before {
  content: "🔍";
}

.icon-refresh::before {
  content: "🔄";
}

.icon-calendar::before {
  content: "📅";
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .form-row {
    flex-wrap: wrap;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .data-table th,
  .data-table td {
    padding: 8px 4px;
  }
}

@media (max-width: 768px) {
  .fee-management {
    padding: 10px;
  }
  
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-item {
    min-width: auto;
  }
  
  .pagination-section {
    flex-direction: column;
    gap: 10px;
  }
}

/* Toast 消息提示样式 */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  color: white;
  font-weight: 500;
  font-size: 14px;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 300px;
  word-wrap: break-word;
}

.toast.show {
  transform: translateX(0);
}

.toast-success {
  background: #52c41a;
}

.toast-error {
  background: #ff4d4f;
}

.toast-warning {
  background: #faad14;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .toast {
    right: 10px;
    left: 10px;
    max-width: none;
    transform: translateY(-100%);
  }
  
  .toast.show {
    transform: translateY(0);
  }
}
</style>



